import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-mobile-videopage',
  templateUrl: './mobile-videopage.component.html',
  styleUrls: ['./mobile-videopage.component.scss']
})
export class MobileVideopageComponent {
  /**
   * @type {any[]}
   * @desc 获取Video表中数据列表
   */
  VideoList:any[]=[];
  /**
   * @type {any}
   * @desc 获取VideoWork表中数据对象
   */
  video:any = {};

  /**
   * @type {string}
   * @desc 路由参数中的视频数据objectId
   */
  videoId:string = ""
    
  /**
   * 
   * 通过id获取VideoWork表中数据对象
   * @returns 
   * 将获取的数据对象赋值给this.video 
   */
  async getVideoById(){
    if(!this.videoId){
      return
    }
    let url = `http://metapunk.cn:9999/parse/classes/VideoWork/${this.videoId}?`
    url += '&include=user,comment'
    let response = await fetch(url, {
        "credentials": "omit",
        "headers": {
            "X-Parse-Application-Id": "dev",
        },
        "method": "GET",
        "mode": "cors"
    })
    let data = await response.json()
    this.video = data;
    console.log(this.video)
    
  }





  constructor(private router:Router,private route:ActivatedRoute){
    this.getVideoDataFromFetch()
    this.route.queryParamMap.subscribe(data=>{
      this.videoId = (data as any).params.id
      this.getVideoById()
    })

  }

/**
 * 
 * @param item 传入一条数据对象
 * 跳转到'/bvideo/mobile-comment'页面
 * 传入对应对象的objecId字段数据
 */
  goVideoComment(item:any){
    console.log(item)
    // [routerLink]="['/bvideo/mobile-videopage']"
    this.router.navigate(['/bvideo/mobile-comment'],{
      queryParams:{
        id: item.objectId
      }
    })
  }

/**
 * 获取Video表数据列表
 * @returns
 * 将数据赋值给this.VideoList
 */
async getVideoDataFromFetch(){
  let response = await fetch("http://metapunk.cn:9999/parse/classes/Video", {
      "credentials": "omit",
      "headers": {
          "X-Parse-Application-Id": "dev",
      },
      "method": "GET",
      "mode": "cors"
  })
    let data = await response.json()
    this.VideoList = data.results;
    
  }


    /**
     * table栏数据列表
     */
  List:Array<any>=[
    {
      src: './/src/assets/modules/dianzan_kuai.png',
      activeSrc: './/src/assets/modules/full-dianzan.png',
    },
    {
      src: './/src/assets/modules/nolike.png',
      activeSrc: './/src/assets/modules/full-nolike.png',
    },
    {
      src: './/src/assets/modules/toubi.png',
      activeSrc: './/src/assets/modules/full-toubi.png',
    },
    {
      src: './/src/assets/modules/shoucang.png',
      activeSrc: './/src/assets/modules/pink-star.png',
    },
    {
      src: './/src/assets/modules/zhuanfa.png',
      activeSrc: './/src/assets/modules/full-zhuanfa.png',
    },
  ]
  flag:boolean=false

  /**
   * 
   * 将图片在正常状态和高亮间转换
   * @param {number} id 图片的下标
   */
  Onchange(id:number){

    if(this.flag==false){
    let changes:any=document.getElementById(`on${id}`)
    changes.setAttribute('src',this.List[id-1].activeSrc)
    this.flag=true

  }
  else if(this.flag==true ) {
    let imgs:any=document.getElementById(`on${id}`)
    imgs.setAttribute('src',this.List[id-1].src)
    this.flag=false
  }  
  }
}
